/*
 * @Author: herw
 * @Date: 2021-05-19 13:58:17
 * @Last Modified by: herw
 * @Last Modified time: 2021-05-27 13:47:36
 */
<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!-- Kafka Producer -->
      <el-col
        :xs="24"
        :sm="24"
        :md="10"
        :lg="11"
        :xl="11"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>消费消息</span>
          </div>
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            size="small"
            label-width="162px"
          >
            <el-form-item label="Kafka Cluster" prop="clusterId">
              <el-select
                v-model="form.clusterId"
                style="width: 80%"
                placeholder="请选择"
                @change="changeCluster"
              >
                <el-option
                  v-for="item in clusters"
                  :key="item.name"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="Topic Name" prop="topicName">
              <el-select
                v-model="form.topicName"
                style="width: 80%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in topics"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="Group ID" prop="groupName">
              <el-input v-model="form.groupName" style="width: 80%" />
            </el-form-item>
            <el-form-item label="Wait Time(ms)" prop="waitTime">
              <el-input-number
                v-model.number="form.waitTime"
                :min="1"
                controls-position="right"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="Number Of Records" prop="recordNum">
              <el-input-number
                v-model.number="form.recordNum"
                :min="1"
                controls-position="right"
                style="width: 80%"
              />
            </el-form-item>
            <el-form-item label="Additional Options" prop="isCommit">
              <el-checkbox>Commit The Record Consumed</el-checkbox>
            </el-form-item>
            <el-form-item label="Consumer Options" prop="isByPartition">
              <el-checkbox>Consumer Topic By Offset</el-checkbox>
            </el-form-item>
          </el-form>
          <div class="bottom clearfix">
            <el-button
              style="float: right; padding: 6px 9px"
              type="text"
              @click="reset"
            >重置</el-button>
            <el-button
              style="float: right; padding: 6px 9px"
              :loading="loading"
              type="primary"
              @click="doSubmit"
            >查询</el-button>
          </div>
        </el-card>
      </el-col>
      <!-- icedesign panel -->
      <el-col
        :xs="24"
        :sm="24"
        :md="14"
        :lg="13"
        :xl="13"
        style="margin-bottom: 10px"
      >
        <el-card class="box-card">
          <vue-json-editor
            v-model="json"
            :show-btns="false"
            :expanded-on-start="true"
            :mode="'tree'"
            lang="zh"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { getAllCluster } from '@/api/mq/kafka/cluster'
import { getByClusterId, consumer } from '@/api/mq/kafka/topic'
import vueJsonEditor from 'vue-json-editor'

export default {
  name: 'Consumer',
  components: { vueJsonEditor },
  mixins: [crud],
  data() {
    return {
      loading: false,
      clusters: [],
      topics: [],
      json: {},
      form: { groupName: 'TestGroup', waitTime: 10000, recordNum: 1 },
      rules: {
        clusterId: [
          { required: true, message: '请输入kafka', trigger: 'blur' }
        ],
        topicName: [
          { required: true, message: '请输入topic', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.topicId = this.$route.params.topicId
    this.$nextTick(() => {
      this.init()
      getAllCluster().then(data => {
        this.clusters = data
      })
    })
  },
  methods: {
    changeCluster(value) {
      getByClusterId(value).then(data => {
        this.topics = data
      })
    },
    reset() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          consumer(this.form).then(res => {
            if (valid) {
              this.json = res
              this.notify('消费成功', 'success')
              this.loading = false
            }
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        }
      })
    }
    // ,
    // resetForm() {
    //   this.$refs['form'].resetFields()
    //   this.form = { key: '', value: '' }
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.edit-input {
  .el-input__inner {
    border: 1px solid #e5e6e7;
  }
}
</style>

<style scoped>
::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>

